<template>
	<form action="/">
		<search
			class="txt"
			shape="round"
			background="rgb(0,170,245)"
			show-action
			placeholder="请输入搜索关键词"
			input-align="center"
			@search="onSearch"
			@cancel="onCancel"
			v-model="foo"
		/>
	</form>
	<div>
		<div class="home-input-top" v-show="xian">视频</div>
		<p v-for="item in newAll" @click="clickHandle">{{ item.name }}</p>
	</div>
</template>
<script setup>
import { Search, Toast } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { localComboAPI } from "../API/jiang";
// 绑定input框的值
const foo = ref("");
// 定义一个新数组用来存储匹配到的数据进行循环展示
const newAll = ref([]);
//总存储
const All = ref([]);
//套参树第一层
const One = ref([]);
//套参树第二层
const Two = ref([]);
//套参树第三层
const Three = ref([]);
//套参树第四层
const Four = ref([]);
// 调用套餐树接口把每一层的name取出来push到All数组里面
localComboAPI().then((res) => {
	One.value = res.data;
	One.value?.forEach((item) => {
		All.value.push(item);
		Two.value = item.children;
		Two.value?.forEach((item) => {
			All.value.push((Three.value = item));
			Four.value = item.children;
			Four.value?.forEach((item) => All.value.push((Four.value = item)));
		});
	});
	console.log(All.value);
});
const xian = ref(false);
// 实现过滤查询
let onSearch = () => {
	if (foo.value) {
		newAll.value = All.value.filter((item) =>
			item.name.includes(foo.value)
		);
		xian.value = true;
		foo.value = "";
	} else {
		Toast({
			message: "请输入搜索内容",
			icon: "like-o",
		});
	}
};
const id = ref([1, 2, 3]);
const idTwo = ref("");
const a = Math.floor(Math.random() * id.value.length + 1);

console.log(a);
if (a == 1) {
	idTwo.value = 25;
} else if (a == 2) {
	idTwo.value = 6;
} else if (a == 3) {
	idTwo.value = 11;
}
const router = useRouter();
const clickHandle = () => {
	router.push({
		name: "Home-Training",
		query: {
			id: a,
			idTwo: idTwo.value,
		},
	});
};
let { push } = useRouter();
let onCancel = () => {
	push({
		name: "Home",
	});
};
</script>
<style scoped>
.test1 {
	display: flex;
	justify-content: space-between;
}
.test2 {
	display: flex;
	flex-direction: column;
	width: 95%;
	margin: auto;
	border-bottom: 0.0625rem solid black;
}
.test3 {
	box-shadow: none;
	font-size: 0.875rem;
}
.test1 span {
	margin: 0.5rem;
	color: gray;
	font-size: 0.9375rem;
}
.van-search__action {
	color: white;
}
.home-input-top {
	background: rgba(128, 128, 128, 0.207);
	height: 2.5rem;
	width: 100vw;
	line-height: 2.5rem;
	text-indent: 0.5em;
	font-size: 1rem;
}
p {
	width: 100vw;
	height: 2.1875rem;
	line-height: 2.1875rem;
	text-indent: 0.5em;
	margin-top: 0.3125rem;
	box-shadow: 0rem 0rem 0.0625rem #8080802e;
	font-size: 0.9375rem;
}
</style>
